<template>
	<view>
		<view class="gui-padding page-bg" v-if="list.length>0">
			<view v-for="(item, index) in list" :key="index" :data-number="item.number" style="margin:0 0 30rpx;"
				@tap="getIt(index)">
				<gui-coupons :coupon="item"></gui-coupons>
			</view>
		</view>
		<!--空信息-->
		<view class="nodata_con" v-if="isLoading==false&&list.length<=0">
			<label class="iconfont icon-meiyoushuju"></label>
			<text>{{$t('no_data')}}</text>
		</view>
		<!--刷新-->
		<view class='loadind_con' v-if="isLoading">
			<view class="loading">
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
			</view>
		</view>
	</view>
</template>
<script>
	import valid from '../../../static/valid.js';

	export default {
		data() {
			return {
				index: 1, //页数
				size: 10, //条数
				isLoading: true, //是否正在加载
				list: [
					// {
					// 	color: '#9F6DFA',
					// 	ltBg: "#FFFFFF",
					// 	height: '180rpx',
					// 	unit: "￥",
					// 	number: 5,
					// 	txt: "满50元可用",
					// 	title: "全场通用券",
					// 	desc: "有效期至 2018-05-20",
					// 	drawed: "已抢2100张"
					// },
					// {
					// 	color: '#FF3456',
					// 	ltBg: "#FFFFFF",
					// 	height: '180rpx',
					// 	unit: "￥",
					// 	number: 10,
					// 	txt: "满50元可用",
					// 	title: "电器专场用券",
					// 	desc: "有效期至 2018-05-28",
					// 	drawed: "已抢2800张"
					// },
					// {
					// 	color: '#FF8830',
					// 	ltBg: "#FFFFFF",
					// 	height: '180rpx',
					// 	unit: "￥",
					// 	number: 100,
					// 	txt: "满500元可用",
					// 	title: "服饰专场用券",
					// 	desc: "有效期至 2018-05-28",
					// 	drawed: "已抢2800张"
					// }
				]
			}
		},
		onLoad() {
			var _this = this;
			//加载列表
			_this.getData();
		},
		onPullDownRefresh() { //下拉刷新
			var _this = this;
			//清空还原
			_this.index = 1;
			_this.list = [];
			_this.isLoading = true;
			_this.getData();
		},
		onReachBottom() { //上拉到底部刷新
			var _this = this;
			_this.index = _this.index + 1;
			_this.isLoading = true;
			_this.getData();
		},
		methods: {
			getData: function() { //获取内容
				var _this = this;
				_this.fun_request("/Api/MemberCoupon/GetPageList", {
					index: _this.index,
					size: _this.size,
					count: 0
				}, function(res) {
					console.log(res);
					var _list = res.data;
					_this.fun_map(_list, function(i, item) {
						_this.list.push({
							color: '#F85F69',
							ltBg: "#FFFFFF",
							height: '180rpx',
							unit: "￥",
							number: item.Coupon.cou_price,
							txt: "满" + item.Coupon.cou_fullPrice + "元可用",
							title: item.Coupon.cou_type ? "全场通用券" : "",
							desc: "有效期 " + item.Coupon.cou_startTime.split('T')[0] + " 至 " + item.Coupon
								.cou_endTime.split('T')[0],
							drawed: item.mc_isUse == 0 ? "未使用" : "已使用",// "已抢" + item.Coupon.cou_receiveNum + "张"
							drawedColor:  item.mc_isUse == 0 ? '#F85F69' : '#03BB4C'
						});
					});
					//加载完成
					_this.isLoading = false;
					//下拉刷新 - 停止
					uni.stopPullDownRefresh();
				});
			},
			getIt: function(e) {
				console.log(e);
			}
		}
	}
</script>
<style>
	/* #ifdef MP */
	page {
		background: #F7F7F7;
	}

	/* #endif */
	/* #ifdef H5 */
	.page-bg {
		min-height: 100vh;
		background-color: #F7F7F7;
		padding-top: 30rpx;
	}

	/* #endif */

	.gui-coupons {
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}

	.gui-coupons-left {
		width: 500rpx;
		height: 150rpx;
		padding-right: 10rpx;
		border-radius: 8rpx;
		position: relative;
	}

	.gui-coupons-left-number {
		width: 168rpx;
		border-right: 1px dashed #D2D2D2;
	}

	.gui-coupons-left-body {
		width: 320rpx;
	}

	.gui-coupons-status {
		color: #FFFFFF;
		padding: 0 10px;
		height: 36rpx;
		line-height: 36rpx;
		font-size: 20rpx;
		position: absolute;
		z-index: 1;
		right: 6px;
		top: 8px;
		border-radius: 36rpx;
	}

	.gui-coupons-right {
		width: 150rpx;
		height: 150rpx;
		font-size: 32rpx;
	}

	.gui-coupons-sawtooth {
		width: 8px;
		height: 150rpx;
		overflow: hidden;
		position: relative;
	}

	.gui-coupons-sawtooth-circular {
		width: 10px;
		margin: 3px 5px;
		height: 10px;
		border-radius: 10px;
		background: #F8F8F8;
	}
</style>
